<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <h2>申请人填写报事项</h2>
      <div>
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="formData.name" />
      </div>
      <div>
        <label for="gender">性别</label>
        <input type="text" id="gender" v-model="formData.gender" />
      </div>
      <div>
        <label for="birthDate">出生日期</label>
        <input type="date" id="birthDate" v-model="formData.birthDate" />
      </div>
      <div>
        <label for="nationality">国籍</label>
        <input type="text" id="nationality" v-model="formData.nationality" />
      </div>
      <div>
        <label for="idNumber">身份证号码</label>
        <input type="text" id="idNumber" v-model="formData.idNumber" />
      </div>
      <div>
        <label for="fileNumber">档案编号</label>
        <input type="text" id="fileNumber" v-model="formData.fileNumber" />
      </div>
      <div>
        <label for="phoneNumber">联系电话</label>
        <input type="text" id="phoneNumber" v-model="formData.phoneNumber" />
      </div>
      <div>
        <label for="address">邮寄地址</label>
        <input type="text" id="address" v-model="formData.address" />
      </div>
      <div>
        <label>申请/已有的准驾车型代号</label>
        <input type="text" v-model="formData.licenseType" />
      </div>
      <div>
        <label>本人如实申告</label>
        <div>
          <input type="checkbox" v-model="formData.medicalConditions" value="临床性心脏病" />
          临床性心脏病
          <input type="checkbox" v-model="formData.medicalConditions" value="癫痫" />
          癫痫
          <input type="checkbox" v-model="formData.medicalConditions" value="美尼尔氏症" />
          美尼尔氏症
          <input type="checkbox" v-model="formData.medicalConditions" value="眩晕" />
          眩晕
          <input type="checkbox" v-model="formData.medicalConditions" value="瘢痕体质" />
          瘢痕体质
          <input type="checkbox" v-model="formData.medicalConditions" value="精神病" />
          精神病
          <input type="checkbox" v-model="formData.medicalConditions" value="癔病" />
          癔病
          <input type="checkbox" v-model="formData.medicalConditions" value="吸食、注射毒品" />
          吸食、注射毒品
        </div>
      </div>
      <h2>医疗机构填写事项</h2>
      <div>
        <label for="height">身高 (cm)</label>
        <input type="number" id="height" v-model="formData.height" />
      </div>
      <div>
        <label for="weight">体重 (kg)</label>
        <input type="number" id="weight" v-model="formData.weight" />
      </div>
      <div>
        <label>辨色力</label>
        <div>
          <input type="radio" id="colorVisionYes" value="有" v-model="formData.colorVision" />
          <label for="colorVisionYes">有</label>
          <input type="radio" id="colorVisionNo" value="无" v-model="formData.colorVision" />
          <label for="colorVisionNo">无</label>
        </div>
      </div>
      <div>
        <label>听力</label>
        <div>
          <input type="checkbox" v-model="formData.hearing" value="左耳" /> 左耳
          <input type="checkbox" v-model="formData.hearing" value="右耳" /> 右耳
        </div>
      </div>
      <div>
        <label>佩戴助听装置</label>
        <div>
          <input type="radio" id="hearingAidYes" value="是" v-model="formData.hearingAid" />
          <label for="hearingAidYes">是</label>
          <input type="radio" id="hearingAidNo" value="否" v-model="formData.hearingAid" />
          <label for="hearingAidNo">否</label>
        </div>
      </div>
      <div>
        <label>躯干和颈部</label>
        <input type="text" v-model="formData.trunkNeck" />
      </div>
      <div>
        <label>上肢</label>
        <div>
          <label>左上肢</label>
          <input type="text" v-model="formData.leftUpperLimb" />
          <label>右上肢</label>
          <input type="text" v-model="formData.rightUpperLimb" />
        </div>
      </div>
      <div>
        <label>下肢</label>
        <div>
          <label>左下肢</label>
          <input type="text" v-model="formData.leftLowerLimb" />
          <label>右下肢</label>
          <input type="text" v-model="formData.rightLowerLimb" />
        </div>
      </div>
      <div>
        <label>双下肢缺失或丧失运动功能障碍是否能独立自主坐立</label>
        <div>
          <input type="radio" id="independentSittingYes" value="是" v-model="formData.independentSitting" />
          <label for="independentSittingYes">是</label>
          <input type="radio" id="independentSittingNo" value="否" v-model="formData.independentSitting" />
          <label for="independentSittingNo">否</label>
        </div>
      </div>
      <div>
        <label>运动功能障碍</label>
        <div>
          <input type="radio" id="motorFunctionYes" value="有" v-model="formData.motorFunction" />
          <label for="motorFunctionYes">有</label>
          <input type="radio" id="motorFunctionNo" value="无" v-model="formData.motorFunction" />
          <label for="motorFunctionNo">无</label>
        </div>
      </div>
      <div>
        <label>委托代理人信息</label>
        <div>
          <label for="agentName">姓名</label>
          <input type="text" id="agentName" v-model="formData.agentName" />
          <label for="agentId">身份证明名称</label>
          <input type="text" id="agentId" v-model="formData.agentId" />
          <label for="agentNumber">号码</label>
          <input type="text" id="agentNumber" v-model="formData.agentNumber" />
          <label for="agentPhone">电话</label>
          <input type="text" id="agentPhone" v-model="formData.agentPhone" />
        </div>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name:"test",
  data() {
    return {
      formData: {
        name: '',
        gender: '',
        birthDate: '',
        nationality: '',
        idNumber: '',
        fileNumber: '',
        phoneNumber: '',
        address: '',
        licenseType: '',
        medicalConditions: [],
        height: '',
        weight: '',
        colorVision: '',
        hearing: [],
        hearingAid: '',
        trunkNeck: '',
        leftUpperLimb: '',
        rightUpperLimb: '',
        leftLowerLimb: '',
        rightLowerLimb: '',
        independentSitting: '',
        motorFunction: '',
        agentName: '',
        agentId: '',
        agentNumber: '',
        agentPhone: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      // Handle form submission
      console.log(this.formData);
    }
  }
};
</script>

<style>
form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

div {
  margin-bottom: 10px;
}

label {
  display: block;
}

input[type="text"],
input[type="date"],
input[type="number"] {
  width: 100%;
}

button {
  grid-column: span 2;
}
</style>
